<template>
  <view class="my-page">
    <nav-custom></nav-custom>
    <view class="cont"> </view>
    <view class="info-cont bg-fff">
      <view class="user-info margin-bottom-20">
        <view @click="handleUser" class="avator-cont">
          <image class="avator-img" src="https://xecho.oss-cn-hangzhou.aliyuncs.com/blog/avatar17.png" mode=""></image>
        </view>
        <view v-if="userInfo.username" class="f24 color-2c">
          {{ userInfo.username }}
        </view>
      </view>
      <!-- 订单详情 -->
      <view class="flex grid flex-wrap">
        <view class="box flex direct-column" v-for="(item, index) in gridArr" :key='index' @click="handleTo(item)">
          <text :class="['iconfont margin-bottom-10', item.icon]"></text>
          <text class="16 bold">
            {{ item.name }}
          </text>
        </view>
      </view>
    </view>
    <view v-if="loginShow" class="login-overlay">
      <login-overlay @pageBack="pageBack"></login-overlay>
    </view>
    <tab-bar tabbar="mine"></tab-bar>
  </view>
</template>

<script>
  import LoginOverlay from '@/components/login-overlay.vue'
  import {
    mapState,
    mapMutations
  } from 'vuex'

  export default {
    data() {
      return {
        gridArr: [{
          icon: 'icon-danju',
          name: '我的订单',
          confirm: '99',
          url: '/pagesB/myOrder/myOrder?confirm=99&navIdx=0'
        }, {
          icon: 'icon-daifukuan',
          name: '待付款',
          confirm: '100',
          url: '/pagesB/myOrder/myOrder?confirm=100&navIdx=2'
        }, {
          icon: 'icon-daifahuo',
          name: '待发货',
          confirm: '1',
          url: '/pagesB/myOrder/myOrder?confirm=1&navIdx=3'
        }, {
          icon: 'icon-daishouhuo',
          name: '待收货',
          confirm: '2',
          url: '/pagesB/myOrder/myOrder?confirm=2&navIdx=1'
        }, {
          icon: 'icon-address',
          name: '收货地址',
          url: '/pagesA/address/address'
        }, {
          icon: 'icon-xiaoxi',
          name: '配送范围',
          url: '/pagesB/mapArea/mapArea'
        }, {
          icon: 'icon-shengyu',
          name: '消息',
          url: '/pagesB/shengYu/shengYu'
        }, {
          icon: 'icon-tuichu',
          name: '退出登录',
          url: '/pagesB/login/login'
        }]
      };
    },
    onShow() {
      if (!this.userInfo.sessionToken) {
        this.changeLoginShow(true)
      }
    },
    components: {
      "login-overlay": LoginOverlay
    },
    computed: {
      ...mapState('cart', ['loginShow']),
      ...mapState('user', ['userInfo'])
    },
    methods: {
      ...mapMutations({
        changeLoginShow: 'cart/changeLoginShow',
        changeTab: 'comunication/changeTab'
      }),
      pageBack() {
        uni.switchTab({
          url: '/pages/home/home'
        })
      },
      handleTo(item) {
        // this.$store.commit('order/changeConf',item.confirm)
        item.name === '退出登录' && this.$store.commit('user/loginOut')
        uni.navigateTo({
          url: item.url,
        })
      }
    }
  }
</script>

<style lang="scss">
  .cont {
    background-color: #f4f4f4;
    height: 500rpx;
    /* #ifdef APP-PLUS */
    height: 600rpx;
    /* #endif */
  }

  .info-cont {
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;

  }

  .grid {
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;

    .iconfont {
      font-size: 60rpx;
      color: #888;
    }
  }

  .box {
    position: relative;
    flex: 0 0 25%;
    height: 200rpx;
    justify-content: center;

    &:nth-child(-n+4) {
      border-bottom: 1px solid #e9e9e9;
    }

    &:nth-child(n+2)::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: #e9e9e9;
    }

    &:nth-child(5)::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: transparent;
    }
  }

  .avator-img {
    overflow: hidden;
    border-radius: 50%;
    width: 250rpx;
    height: 250rpx;
    margin-top: -100rpx;
  }

  .margin,
  .bg-fff {
    margin-top: -250rpx;
    /* #ifdef APP-PLUS */
    margin-top: -150rpx;
    /* #endif */
  }
</style>
